<div id="content">
    <div class="row s_page_title">
        <div class="row s_page_title">
            <sa-big-breadcrumbs [items]="['运输任务','隧道标记']" icon="fa fa-truck" class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></sa-big-breadcrumbs>
        </div>
        <sa-widgets-grid>
            <div class="s_table">
                <div sa-widget [editbutton]="false" color="darken" class="clearfix">
                    <header><span class="widget-icon"> <i class="fa fa-table"></i> </span>
                        <h2>隧道标记</h2>
                    </header>
                    <div>
                        <div class="widget-body no-padding">
                            <div class="page-header clearfix s_table_opreation">
                                <div class="left page-header-btn" style="width: calc(100% - 230px);">
									<!--<div class="top_module">
                                        <span class="module_text">隧道名称</span>
                                        <input type="text" class="module_inp top_module_select" placeholder="隧道名称" [(ngModel)]='tableParam.tunnelMarkName'>
                                    </div>
                                    <button class="btn btn-primary" (click)="tableSearch()">查询</button>-->
                                    <button class="btn btn-primary" (click)="addTunnelMark(tunnelMarkModal)">添加</button>
                                </div>
                                <div class="right top-search">
                                    <input type="text" [(ngModel)]="tableParam.searchKey" (change)="tableSearch()" class="search-input" placeholder="隧道名称">
                                    <span class="top-search-box">
                                        <button class="top-search-btn" type="button" (click)="tableSearch()"> <i class="fa fa-search"></i></button>
                                    </span>
                                </div>
                            </div>
                            <div class="table_scroll">
                                <table class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table">
                                    <thead>
                                        <tr>
                                            <th>操作</th>
                                            <th>隧道名称</th>
                                            <th>备注</th>
                                            <th>最后修改人</th>
                                            <th>最后修改时间</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr *ngFor="let row of tableData">
                                            <td>
                                                <button type="button" (click)="editRow(row,tunnelMarkModal)">编辑</button>
                                                <button type="button" (click)="deleteRow(row)">删除</button>
                                            </td>
                                            <td>{{row.tunnelMarkName}}</td>
                                            <td>{{row.remark}}</td>
                                            <td>{{row.updateUser}}</td>
                                            <td>{{row.updateTime}}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="table-fix clearfix">
                                <paginator [totalRecords]="totalCount" [rows]="pageSize" [currentPage]="curPage - 1" (onPageChange)="paginate($event)"></paginator>
                                <button type="button" class="btn default refresh_btn" (click)="refresh()"><i class="fa fa-refresh"></i></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </sa-widgets-grid>
        <!-- 隧道添加、编辑   弹窗-->
        <section bsModal #tunnelMarkModal="bs-modal" class="modal" role="dialog" tabindex="-1" aria-labelledby="myLargeModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" style="width: 1000px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" (click)="tunnelMarkClose(tunnelMarkModal)" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title"><span>{{pageType}}</span>隧道标记</h4>
                    </div>
                    <div class="modal-body">
                        <form id="" class="form-horizontal" role="form" novalidate="novalidate">
                            <div class="row form-horizontal">
								<div class="form-group">
									<label class="col-md-2 control-label">隧道名称<sup>*</sup></label>
									<div class="col-md-7">
										<input name="tunnelMarkName" [(ngModel)]="tunnelMarkForm.tunnelMarkName" type="text" class="form-control form-control-sm" placeholder="隧道名称">
									</div>
								</div>
								<div class="form-group">
                                    <label class="col-md-2 control-label">备注</label>
                                    <div class="col-md-7">
                                        <input name="address" [(ngModel)]="tunnelMarkForm.remark" type="text" class="form-control form-control-sm" placeholder="备注">
                                    </div>
                                </div>
								<div style="position: relative;">
								    <div  style="position: absolute;width: 520px;left: 0; bottom: -74px;color:#ff3030">
                                        <p>画圆/矩形：鼠标左键点击，拖动鼠标，松开左键，完成画圆/矩形。</p>
                                        <p>画多边形：左键点击，移动鼠标，再次点击，依次类推，双击左键，完成画多边形。</p>
                                    </div>
								    <div class="map-box clearfix">
								        <div  style="position: absolute;right:2px;top: 90px;z-index:9" class="enclosure"> 
                                            <ul>
                                                 <li (click)="railTypeSelected('circle')"  class="rail" >
                                                    <img src="assets/img/rail/icon1.png">
                                                    <span class="railType railHover1">画圆</span>
                                                </li>
                                                <li (click)="railTypeSelected('rectangle')"  class="rail">
                                                    <img src="assets/img/rail/icon2.png">
                                                    <span class="railType railHover2">画矩形</span>
                                                </li>
                                                <li (click)="railTypeSelected('polygon')"  class="rail">
                                                    <img src="assets/img/rail/icon3.png">
                                                    <span class="railType railHover3">画多边形</span>
                                                </li>
                                                <li (click)="clearRailType3()"  class="rail">
                                                    <img src="assets/img/rail/icon4.png">
                                                    <span class="railType railHover4">清除围栏</span>
                                                </li>
                                            </ul>
                                        </div>
                                        <!-- 手动输入经纬度定位 -->
                                        <form id="inpForm" role="form">
                                            <div class="posiMap table-top page-header" style="position:absolute;right:8px;top:10px;z-index: 9;margin: 0;border: none;">
                                                <div class="top_module longitude">
                                                    <span class="module_text" style="background-color:rgba(204,204,204,0.8);">经度
                                                    </span><div class="s_hover_box">
                                                        <input id="inpLongitude" name="longitude" placeholder='请输入经度' style="background-color: rgba(255,255,255,0.8);height:28px;border: 1px solid rgba(204,204,204,0.8);width:140px;" class="form-control form-control-sm">
                                                    </div>
                                                </div>
                                                <div class="top_module latitude" style='margin-right:0;'>
                                                    <span class="module_text" style="background-color:rgba(204,204,204,0.8);">纬度
                                                    </span><div class="s_hover_box">
                                                        <input id="inpLatitude" name="latitude" placeholder='请输入纬度' style="background-color: rgba(255,255,255,0.8);height:28px;border: 1px solid rgba(204,204,204,0.8);width:140px;" class="form-control form-control-sm">
                                                    </div>
                                                </div>
                                                <button type="button" id="baiDuLocation" title="此定位为百度坐标系定位" class="btn btn-primary" style="margin:5px;" (click)='inpMark()'>百度定位</button>
                                            </div>
                                        </form>
								        
								        
								        
								        
                                        <div id="baiduMap" style="width: 958px;height: 400px;"></div>
                                        <sa-bmap-tools [baiduMap]="MAP" [isShowZoom]="true" [reduceRight]="480" baiduMapId="baiduMap" baiduMapHeight="47px"></sa-bmap-tools>
                                        <div class="auto-search-bmap">
                                            <div id="r-result"><input type="text" id="suggestId" placeholder="请输入地址" /></div>
                                            <i class="fa fa-search suggestIcon" (click)="suggestSearchBtn()"></i>
                                            <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
                                        </div>
                                    </div>
								</div>
							</div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" (click)="tunnelMarkClose(tunnelMarkModal)">取消</button>
                        <button type="button" class="btn btn-primary" (click)="tunnelMarkSubmit(tunnelMarkModal)">提交</button>
                    </div>
                </div>
            </div>
        </section>
        <!-- 隧道添加、编辑   弹窗end-->
    </div>